<template>
    <div class="HomeTab" >
        <div class="detail" v-for="item in cookbookData">
            <div class="message">
                <img class="head-shot" 
                src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ztUt10fQ6GVGvRp3w9tiQgAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
                <p class="user-name">{{ item.user_name }}</p>
                <p class="level">LV.1</p>
                <div class="feedback">···</div>
            </div>
            <div class="detail-food">
                <router-link :to="`/detail/${item.cook_book_id}`">
                    <div class="dishes">
                        <img :src="item.cook_book_image" alt="">
                    </div>
                    <div class="food-introduce">
                        <p>{{item.cook_book_title}}</p>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import http from '../tools/axios';
import {useRouter} from 'vue-router';
const router = useRouter();
router.beforeEach((to,from,next)=>{
    window.scrollTo(0,0),
    next();
})
const cookbookData = ref([])
const img = ref();
const getCookbook = () => {
    http.get('/cook/get').then((res) => {
        console.log(res);
        if (res.data.code === 200) {
            cookbookData.value = res.data.data;
            console.log(cookbookData.value);
        } else {
            console.log('error');
        }

    })
}
getCookbook();
</script>

<style lang="scss">
.HomeTab {
    .detail {
        .message {
            position:relative;
            display: flex;
            align-items: center;
            margin-top: 15px;

            .head-shot {
                margin-left: 10px;
                width: 35px;
                height: 35px;
                border-radius: 90px;
            }

            .user-name {
                margin-left: 10px;
                font-size: 14px
            }

            .level {
                margin-left: 10px;
                font-size: 12px;
                font-style: italic;
                color: gold;
            }

            .feedback {
                position:absolute;
                right:10px;
                font-weight: 600;
            }
        }

        .detail-food {
            .dishes {
                margin-top: 15px;
                width: 375px;
                height: 235px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .food-introduce {
                margin-left: 10px;

                p {
                    font-size: 14px;
                    font-weight: 400;
                    color: black;
                }
            }
        }

    }
}
</style>